<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>聊天室 - 聊天窗口 - ${toUserName}</title>

    <meta name="keywords" content="聊天室">

    <link rel="shortcut icon" href="favicon.ico"> <link href="${ctxPath}/static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctxPath}/static/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="${ctxPath}/static/css/plugins/jsTree/style.min.css" rel="stylesheet">
    <link href="${ctxPath}/static/css/animate.css" rel="stylesheet">
    <link href="${ctxPath}/static/css/style.css?v=4.1.0" rel="stylesheet">

</head>

<body class="gray-bg">

    <div class="wrapper wrapper-content  animated fadeInRight">

        <div class="row">
            <div class="col-sm-12">

                <div class="ibox chat-view">

                    <div class="ibox-title">
                        <small class="pull-right text-muted"></small> 聊天窗口
                    </div>


                    <div class="ibox-content">

                        <div class="row">

                            <div class="col-md-9 ">
                                <div class="chat-discussion">




                                </div>

                            </div>
                            <div class="col-md-3">
                                <div class="chat-users">


                                    <div class="users-list">
                                       <!-- <div class="chat-user">
                                            <img class="chat-avatar" src="${ctxPath}/static/img/a4.jpg" alt="">
                                            <div class="chat-user-name">
                                                <a href="#">伤城Simple</a>
                                            </div>
                                        </div>-->



                                    </div>

                                </div>
                            </div>

                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="chat-message-form">

                                    <div class="form-group">

                                        <textarea class="form-control message-input" id="messageInput" name="message" placeholder="输入消息内容，按回车键发送"></textarea>
                                    </div>

                                </div>
                            </div>
                        </div>


                    </div>

                </div>
            </div>

        </div>


    </div>
    <input type="hidden" id="userNameValue" value="${fromUserName}">


    <script type="text/template" id="chat-message">
        <div id="chat_message" class="chat-message-right">
            <img class="message-avatar" src="${ctxPath}/static/img/a1.jpg" alt="">
            <div class="message">
                <a class="message-author" href="#"></a>
                <span class="message-date"></span>
                <span class="message-content">
                </span>
            </div>
        </div>
    </script>






    <!-- 全局js -->
    <script src="${ctxPath}/static/js/jquery.min.js?v=2.1.4"></script>
    <script src="${ctxPath}/static/js/bootstrap.min.js?v=3.3.6"></script>



    <script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
    <!--统计代码，可删除-->

    <!--
    单聊： https://blog.csdn.net/yayicho/article/details/52330627
    -->

    <script type="application/javascript">
        var websocket = null;
        if ('WebSocket' in window) {
            websocket = new WebSocket('ws://localhost:8080/webSocket?userName='+$("#userNameValue").val());

        } else {
            alert('该浏览器不支持websocket');
        }

        websocket.onopen = function (event) {
            console.log('websocket打开连接');

        }

        websocket.onclose = function (event) {
            console.log('websocket关闭连接');
        }

        websocket.onmessage = function (event) {
            console.log('websocket收到消息' + event.data);
            var result = $.parseJSON(event.data);
            if (result.type == 4) {
                var userName = $("#userNameValue").val();

                if(userName==result.userName){
                    console.log(getMessageTemplate("chat-message-right"));
                    $('.chat-discussion').append(getMessageTemplate("chat-message-right"));
                }
                else {
                    $('.chat-discussion').append(getMessageTemplate("chat-message-left"));

                }


                $(".message-content:last").html(result.message);
                $(".message-author:last").html(result.userName);
                $(".message-date").html(result.currentDate);

            }
            else {
                $(".text-muted").text("在线人数："+result.userNum);
                $(".users-list").empty();
                for(var i=0;i<result.userNames.length;i++){

                    var userTemplate =
                        ' <div class="chat-user" id='+result.userNames[i]+'>\n' +
                        '            <img class="chat-avatar" src="${ctxPath}/static/img/a4.jpg" alt="">\n' +
                        '            <div class="chat-user-name">\n' +
                        '                <a id="userName" href="#">'+result.userNames[i]+'</a>\n' +
                        '            </div>\n' +
                        ' </div>';
                    $(".users-list").append(userTemplate);
                }




            }

        }

        websocket.onerror = function (event) {
            console.log('websocket通信发生错误');

        }

        window.onbeforeunload = function (event) {
            websocket.close();
        }

        $(document).keyup(function(event){
            if(event.keyCode ==13){
                var message = $('#messageInput').val();
                if (message == "") {
                    alert('请输入要发送的消息');
                    return;
                }

                sendmessage(message);
                $('#messageInput').val("");
            }
        });


        function sendmessage(message) {
            var obj=null;
            //单聊
            if(message!=undefined){
                obj = {
                    //type是用来区分是单聊和群聊
                    type:1,//1为单聊，2为群聊
                    toUser:"${toUserName}",
                    fromUser:"${fromUserName}",
                    msg:message
                };
            }
            obj = JSON.stringify(obj);
            console.info(obj);
            websocket.send(obj);

        }

        function getMessageTemplate(leftOrRight) {

            var messageTemplate =
                ' <div id="chat_message" class="'+leftOrRight+'">\n' +
                '            <img class="message-avatar" src="${ctxPath}/static/img/a1.jpg" alt="">\n' +
                '            <div class="message">\n' +
                '                <a class="message-author" href="#"></a>\n' +
                '                <span class="message-date"></span>\n' +
                '                <span class="message-content">\n' +
                '                </span>\n' +
                '            </div>\n' +
                '</div>';
            return messageTemplate;

        }
    </script>
</body>

</html>
